﻿<%@ Page Language="C#" AutoEventWireup="true" CodeFile="imgact.aspx.cs" Inherits="EZCRS.HCMS.Web.manage.hotel.imgact" %>

<%@ Register Src="../usercontrol/titlepage.ascx" TagName="titlepage" TagPrefix="uc2" %>
<%@ Register Assembly="Book38.Net.CustomControl" Namespace="Book38.Net.CustomControl"
    TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>酒店图片管理</title>
    <style>
        
    .photoul
    {
    	list-style:none;
    }
    .photologo
    {
    	list-style:none;
    }
    .photoul li
    {
    	padding:5px;
    	text-align:center;
    	float:left;
    }
    
     .photologo li
    {
    	padding:5px;
    	text-align:center;
    	float:left;
    }
    
    .photologo li span
    {
    	color:Gray;
    } 
           
    .photoul li span
    {
    	color:Gray;
    } 

    .imgphoto
    {
    	border:0px;
    	width:90px;
    	height:70px;
    	
    }
    
    .delphoto img
    {
    	border:0px;
    }
    
    .img_warp
    {
    	width:300px;
    	height:200px;
    	border:#d5d59d 1px solid;
    	overflow:auto;
    	
    }
    
    </style>
    <script src="../../Common/jquery-1.2.6.min.js"></script>
    <script src="../../Common/ajaxupload.js"></script>

</head>
<body>
    <script>
    
        //jay.gu
        //2009-6-2
        
        //图片管理js
        
        var hasfile = false;
        var edit = false;   //edit mode
        var oldtype = 0;
        
        $(document).ready(function(){

            var ajaxup = new AjaxUpload('#btnUpload', {

                action: 'imgact.aspx',
                name: 'userfile',
                autoSubmit: false,

                onChange: function(file, extension){
                    if (! (extension && /^(jpg|png|jpeg|gif)$/.test(extension))){
                        alert('<%= Resources.Site.ScriptNoFile %>');
                        return false;
                    }
                    else{
                        hasfile = true;
                        $("#filen").html(file);
                    }
                },

                onSubmit: function(file, extension) {
                    if (! (extension && /^(jpg|png|jpeg|gif)$/.test(extension))){
                        alert('<%= Resources.Site.ScriptNoFile %>');
                        return false;
                    }

                },

                onComplete: function(file, response) {
                
                    hasfile = false;
                    
                    $("#filen").html("");
                    //alert(response);
                    
                    var callbackObj = eval('(' + response + ')');
                    
                    $("#imgupload").attr("src", callbackObj.url);
                    
                    $("#imgupload").fadeIn(500);
                    
                    showphoto(callbackObj);
                }
                
            });
            
            
            $("#btnSubmit").click(function() {
            
               if($('#txtPhotoName').val() == ""){
                    alert("<%= Resources.Site.ScriptPicName %>");
                    return;
                }
                
                //get country value
	            var ptype;
	            
    		    var objselect = document.getElementById("ddlPhotoType");
    		    
	            for(var i = 0; i < objselect.length; i++) {
                    if (objselect[i].selected == true){
                        ptype = objselect[i].value;
                        break;
                    }
                }
                
                if(hasfile){
                    //图片上传提交
                    var data = {
                            photoname : $('#txtPhotoName').val(),
                            phototype : ptype,
                            photoid: $('#hidPhotoID').val()
                        };
                    
                    ajaxup.setData(data);
                    
                    ajaxup.submit();
                }
                else {
                
                    if(!edit)
                        alert("<%= Resources.Site.ScriptPicSelect %>");
                    else {
                        //只修改信息提交
                        var data = {
                            photoname : $('#txtPhotoName').val(),
                            phototype : ptype,
                            photoid: $('#hidPhotoID').val()
                        };
                        
                        $.post("imgact.aspx", data, 
                            function(data, state){
                                showphoto(data);
                                
                            }, "json");
                    }
                }
                
                return;
           });
           
           
           //点击图片查看详情
           $(".getthis").click(function (){

                $.getJSON("?action=get&id=" + $(this).attr("id"),
                    
                    function(data){
                        getphoto(data);
                    }
                );
           });
           
           
           //点击删除的操作
           $(".delphoto").click(function (){
                if(confirm("<%= Resources.Site.ScriptConfirm %>")){
                
                    $.getJSON("?action=del&id=" + $(this).attr("id"),
                        
                        function(data){
                            dodel(data);
                        }
                    );
                }
           });
                     
           
           //取消编辑
           $('#btncxl').click(function() {
                reset();
           });
           
           reset();
           
        });
 
        function reset(){
            $('#btnSubmit').val('<%= Resources.Site.ScriptAdd %>');
            $('#hidPhotoID').val('0');
            
            edit = false;
            oldtype = 0;
            
            $("#imgupload").hide(500);
            $('#btncxl').hide();
            
            $('#txtPhotoName').val('');
        }
        
        //用于对新添加的图片点击发送服务器
        function getphotobyid(id){
            $.getJSON("?action=get&id=" + id,
                
                function(data){
                    getphoto(data);
                }
            );            
        }
        
        //删除图片发送服务器操作
        function delphoto(id){
            if(confirm("<%= Resources.Site.ScriptConfirm %>")){
                $.getJSON("?action=del&id=" + id,
                    
                    function(data){
                        dodel(data);
                    }
                );
            }         
        }
        
        //delete ui object
        function dodel(data){
            $("#l" + data.photoid).remove();
            
            reset();
        }
        
        //显示单张照片信息
        //进入编辑模式
        function getphoto(data){
        
            $("#imgupload").fadeOut(500);
            
            $('#txtPhotoName').val(htmlDecode(data.photoname));
            $("#imgupload").attr("src", data.url);
            $('#hidPhotoID').val(data.photoid.toString()); //photo id
            
            $("#imgupload").fadeIn(500);
            
            edit = true;
            hasfile = false;
            
            $('#btnSubmit').val('<%= Resources.Site.ScriptRefresh %>');
            
            var objselect = document.getElementById("ddlPhotoType");
		    
            for(var i = 0; i < objselect.length; i++) {
                if (objselect[i].value == data.type){
                    objselect[i].selected = true;
                    break;
                }
            }
            
            oldtype = data.type;
            
            $('#btncxl').show();
        }
        
        //添加或修改后重新调整显示界面
        function showphoto(photo){
        
            var change = false;
        
            if(photo.type != oldtype){
                //发生过类型改变，需要换位
                
                $("#l" + photo.photoid).remove();
                
                change = true;
                
                oldtype = photo.type;
            }
            
            var ul = ".photoul";
            
            if(photo.type != 1){
                ul = ".photologo";
            }
            
            if(!edit || change){
                $(ul).prepend("<li id='l" + photo.photoid + "'><a href=\"javascript:getphotobyid('photo" + photo.photoid + "')\" id='photo" + photo.photoid + "' class='getthis'>" + 
                                             "<img src=\"" + photo.url + "\" class='imgphoto' /></a><br/><span id='sp" + photo.photoid + "'>" + photo.photoname + "</span><br/>" + 
                                             "<a href=\"javascript:delphoto(" + photo.photoid + ")\" id='del'" + photo.photoid + " class='delphoto'><img src='..\\..\\image\\delete.gif' /></a></li>");
            }
            else {
                $("#photo" + photo.photoid + " img").attr("src", photo.url);
                $("#sp" + photo.photoid).html(photo.photoname);
            }
            
        }
        
        
        function htmlDecode(str){
        
           var div = document.createElement("div");
           div.innerHTML = str;
           
           return div.innerHTML;
        }

      
    </script>
    
    <form id="form1" runat="server">
    <uc2:titlepage ID="Titlepage1" runat="server" inittitle="<%$ Resources:Site, TitleImage %>">
    </uc2:titlepage>
    <table cellpadding="0" cellspacing="0" class="main-table">
        <tr class="line-even">
            <td>
                <table width="100%" border="0" cellpadding="0" cellspacing="0">
                    <tr>
                        <td width="50%" valign="top">
                            
                            <asp:Literal ID="ltllist" runat="server"></asp:Literal>
                        </td>
                        <td width="50%" valign="top">
                            <table align="center" border="0" cellspacing="0" cellpadding="0" class="maininfo">
                                <tr>
                                    <th colspan="2" class="minfo-title">
                                        <asp:Label runat="server" ID="Label1" Text="<%$ Resources:Site, LabPicModify %>"></asp:Label>
                                    </th>
                                </tr>
                                <tr>
                                    <td width="80">
                                        *<asp:Label runat="server" ID="Label3" Text="<%$ Resources:Site, LabPic %>"></asp:Label><asp:Label runat="server" ID="Label2" Text="<%$ Resources:Site, LabName %>"></asp:Label>：
                                    </td>
                                    <td>
                                        <cc1:WebTextBox ID="txtPhotoName" runat="server" CssClass="text-line" Width="150px"
                                            AllowEmpty="True" MaxLength="50"><Value>
</Value></cc1:WebTextBox>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        *<asp:Label runat="server" ID="Label4" Text="<%$ Resources:Site, LabPicType %>"></asp:Label>：
                                    </td>
                                    <td>
                                        <asp:DropDownList ID="ddlPhotoType" runat="server">
                                        </asp:DropDownList>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <asp:Label runat="server" ID="Label5" Text="<%$ Resources:Site, LabSelectPic %>"></asp:Label>：
                                    </td>
                                    <td>
                                        <input id="btnUpload" class="bttn" type="button" value="<%= Resources.Site.BtnSelectPic %>" />
                                        <span id="filen"></span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        &nbsp;</td>
                                    <td>
                                    <div class="img_warp">
                                       <img id="imgupload" src="" />
                                    </div></td>
                                </tr>
                                <tr>
                                    <td>
                                        &nbsp;
                                    </td>
                                    <td>
                                        <input id="btnSubmit" class="bttn" type="button" value="<%= Resources.Site.ScriptAdd %>" />
                                        <input id="btncxl" class="bttn" type="button" value="<%= Resources.Site.ScriptCancel %>" />
                                        <input id="hidPhotoID" type="hidden" value="0" />
                                    </td>
                                </tr>
                            </table>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center" valign="middle">
                            &nbsp;
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>
